.AIBox001 {
	height: 80vh;
	padding: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	overflow: hidden;

	& > .top,
	& > .btm {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		overflow: hidden;

		& > .left {
			flex: 1;
			height: 100%;
			margin-right: 16px;
		}

		& > .right {
			width: 300px;
			height: 100%;
		}

		&.top {
			flex: 1;
			margin-bottom: 16px;

			& > .left {
				width: 100%;
				height: 100%;
				border: 1px solid #ccc;
				padding: 16px;
				border-radius: 8px;
				overflow-y: scroll;

				&::-webkit-scrollbar {
					display: none;
				}

				& > div {
					width: 100%;
					margin-bottom: 16px;
					display: flex;
					align-items: center;

					&.question {
						justify-content: flex-end;

						& > div {
							background: #21f00e;
						}
					}

					&.response {
						justify-content: flex-start;

						& > div {
							background: #ffffff;
						}
					}

					& > div {
						max-width: 60%;
						padding: 8px 16px;
						border-radius: 8px;

						& > div:nth-child(1) {
							margin-bottom: 8px;
							font-size: 18px;
							font-family: ShuHeiTi;
							font-weight: bold;
							color: #033239;
						}

						& > div:nth-child(2) {
							font-size: 16px;
							font-family: MicrosoftYaHei;
							font-weight: bold;
							color: #262626;
						}

						.Title {
							margin: 8px 0;
							font-size: 18px;

							font-family: ShuHeiTi;
							font-weight: bold;
							color: #35c5db;
						}

						& > .options {
							display: flex;
							align-items: center;
							justify-content: flex-end;

							& > button {
								margin-left: 8px;
							}
						}
						.link {
							display: flex;
							align-items: flex-start;
							justify-content: flex-start;
							flex-direction: column;
						}
					}
				}
			}

			& > .right {
				& > img {
					width: 300px;
					display: block;
				}
			}
		}

		&.btm {
			height: 60px;
		}
	}
}
